<template>
  <div>
    <!-- <img style="width:100%" :src="bg_img" alt="" /> -->
    <div class="banner container">
      <div class="step">
        <router-link to="/holdall">
          <span class="active">工具箱</span>
        </router-link>&nbsp;&nbsp;/&nbsp;&nbsp;
        <span>同名查询</span>
      </div>
    </div>
    <div style="background: #ebebf6;">
      <tips></tips>

      <div id="Types"
           class="search_box">
        <div class="search_province">
          <div class="height margin_box width_50">省份</div>
          <el-select class="province_select"
                     v-model="province"
                     placeholder="全国">
            <el-option v-for="(item,index) in data"
                       :key="index"
                       :label="item.name"
                       :value="item.value"></el-option>
          </el-select>
        </div>
        <div class="search_name">
          <div class="height margin_box width_50">姓名</div>
          <el-input class="province_select"
                    v-model="searchName"
                    placeholder="请输入姓名"></el-input>
        </div>
        <el-button :class="['ml-30', 'serch_button', width == '100%' ? 'margin_top' : '']"
                   @click="searchNameData()">查询</el-button>
        <vip-count></vip-count>
      </div>
    </div>

    <div :class="['flex', 'map_box', width !== '100%' ? 'row' : 'column']">
      <!-- 地图信息渲染 -->
      <div id="myChartChina"
           :style="{ width: width, height: '630px' }"></div>
      <!-- 数据排序 -->
      <div :style="{ width: width, height: '630px' }"
           v-if="searchResult"
           :class="[width == '100%' ? 'column_padding_left' : 'column_padding']">
        <!-- 查询结果，返回查询的总数量 ；截止日期 -->
        <div>
          <span class="result">查询结果</span>
          <span class="result_border">
            全国共有
            <span class="font_blue">&nbsp;&nbsp;{{ num }}&nbsp;&nbsp;</span>
            人同名
          </span>
        </div>
        <div class="result_time">
          <span>查询数据截止时间为 {{currentTime}}</span>
        </div>
        <!-- 倒序排序 1 北京 10235-->
        <div class="flex column column_box">
          <div v-for="(item, index) in provinceData"
               :key="index"
               style="font-size:16px"
               class="flex column_li">
            <div class="font_num">{{ index + 1 }}</div>
            <div class="column_li_name text_center">{{ item.name }}</div>
            <div v-if="item.value == '-1'"
                 class="column_li_text flex align_center">
              数据查询失败
              <el-tooltip placement="top"
                          effect="light">
                <div slot="content">
                  手动查询，请访问下面网址：
                  <br />
                  <span class="result_time">{{ item.no_data_url }}</span>
                </div>
                <img class="icon"
                     :src="icon" />
              </el-tooltip>
            </div>
            <div v-else
                 class="bg_value font_blue"
                 :style="{
								width: 60 - 2 * index + 'px',
								padding: '1px 5px'
							}">{{ item.value }}</div>
          </div>
        </div>
      </div>
      <div :class="[width !== '100%' ? '' : 'text_center']"
           :style="{ width: width, height: '500px', padding: '50px 0 0' }"
           v-else>
        <div>
          <span class="result">查询结果</span>
        </div>
        <div class="result_time">
          <span>查询数据截止时间为 {{currentTime}}</span>
        </div>
        <img style="margin:30px 0"
             class="province_select"
             :src="icon5"
             alt />
        <!-- <div>查询失败，您可以尝试<span class="font_blue">手动查询</span></div> -->
      </div>
    </div>
    <clientBtn></clientBtn>
  </div>
</template>

<script>
import { Loading } from "element-ui";
import bg_img from "@/assets/images/rename_top.png";
import icon5 from "@/assets/images/result_fail.png";
import icon from "@/assets/images/question.png";
import "../../../node_modules/echarts/map/js/china.js"; // 引入中国地图数据
import echarts from "echarts"; //引入echarts
import clientBtn from '../../components/clientBtn'
export default {
  components: {
    clientBtn
  },
  data () {
    return {
      provinceData: [{ name: "", value: "" }], // 查询结果渲染准备
      searchName: "", // 查询名字
      province: "", // 请求传参的省份
      num: 0, // 查询结果人口总数
      width: "0%",
      bg_img,
      icon5,
      icon,
      searchResult: false,
      searchAnthor: [
        {
          name: "北京",
          value: "https://gaj.beijing.gov.cn/rkgl/reserve/checkNameSexNum"
        },
        { name: "天津", value: "http://ms.ga.tj.gov.cn/site/" },
        {
          name: "上海",
          value: "https://shanghaicity.openservice.kankanews.com/"
        },
        { name: "重庆", value: "微信搜索“平安重庆”关注公众号-微警务-重名查询" },
        {
          name: "河北",
          value: "http://gat.hebei.gov.cn/default.php?mod=c&s=ss22f5f91#cybscx"
        },
        {
          name: "河南",
          value:
            "http://bsdt.henanga.gov.cn/MainPages/ChaXunZhongXin/SameNameQuery"
        },
        { name: "云南", value: "搜索“云南公安”关注公众号-微警务-重名查询" },
        {
          name: "辽宁",
          value: "搜索“辽宁公安”关注公众号-微服务-户政服务-重名查询"
        },
        {
          name: "黑龙江",
          value: "http://gafw.hljga.gov.cn/wyc.do?method=Show&wycid=a7#"
        },
        {
          name: "贵州",
          value: "https://zwfw.gzga.gov.cn/#/query_sear/name-query"
        },
        {
          name: "湖南",
          value:
            "搜索“大湘网”关注公众号-向公众号打字发送重名二字即可（或直接点击网页）"
        },
        {
          name: "安徽",
          value:
            "http://www.ahga.gov.cn:8087/was2/was/hall/V1/jsp/st/cyc.jsp?type=hz&flag=2#ewt"
        },
        {
          name: "山东",
          value: "https://www.sdmsjw.gov.cn/searchservice/index.shtml?type=7"
        },
        {
          name: "江苏",
          value:
            "http://www.jszwfw.gov.cn/jmopen/webapp/html5/master/jstmcx/index.html"
        },
        {
          name: "浙江",
          value: "http://www.zjsgat.gov.cn:8080/was/portals/samenamequery.jsp"
        },
        {
          name: "江西",
          value: "支付宝搜索赣服通“赣服通”进入小程序-直接搜索重名查询"
        },
        {
          name: "湖北",
          value: "搜索“湖北公安政务服务平台”关注公众号-微警务-重名查询"
        },
        { name: "广西", value: "广西壮族自治区" },
        {
          name: "甘肃",
          value:
            "http://gat.gansu.gov.cn:28089/gsgazw/templates/pages/chaxun/index"
        },
        {
          name: "山西",
          value:
            "需要注册登录后方可查询，微信搜索“山西公安”关注公众号，完成认证-民生警务-便民查询-同名查询（即可通过公众号查询，认证后也可直接登录网址查询）"
        },
        { name: "内蒙古", value: "内蒙古自治区" },
        {
          name: "陕西",
          value: "http://wsbs.shxga.gov.cn/webjjcluster/cityindex.jsp"
        },
        {
          name: "吉林",
          value: "http://gafw.jl.gov.cn/MainPages/ChaXunZhongXin/DuplicateQuery"
        },
        {
          name: "福建",
          value:
            "搜索“福州公安”关注公众号-微警局-重名查询（关注公众号后，查询结果公众号推送消息通知）"
        },
        { name: "新疆", value: "新疆维吾尔族自治区" },
        {
          name: "广东",
          value: "搜索广东治安户政“广东治安户政”-民生警务-重名查询"
        },
        { name: "青海", value: "http://gat.qinghai.gov.cn/stmhwz/bmfw/toCMCX" },
        { name: "西藏", value: "西藏自治区" },
        {
          name: "四川",
          value: "http://scgazwfw.sczwfw.gov.cn/?convenientService=xinshenger"
        },
        { name: "宁夏", value: "宁夏回族自治区" },
        { name: "海南", value: "海南省" },
        { name: "台湾", value: "台湾省" },
        { name: "香港", value: "香港特别行政区" },
        { name: "澳门", value: "澳门特别行政区" }
      ],
      data: [
        { name: "全国", value: "" },
        { name: "北京", value: "北京市" },
        { name: "天津", value: "天津市" },
        { name: "上海", value: "上海市" },
        { name: "重庆", value: "重庆市" },
        { name: "河北", value: "河北省" },
        { name: "河南", value: "河南省" },
        { name: "云南", value: "云南省" },
        { name: "辽宁", value: "辽宁省" },
        { name: "黑龙江", value: "黑龙江省" },
        { name: "湖南", value: "湖南省" },
        { name: "安徽", value: "安徽省" },
        { name: "山东", value: "山东省" },
        { name: "江苏", value: "江苏省" },
        { name: "浙江", value: "浙江省" },
        { name: "江西", value: "江西省" },
        { name: "湖北", value: "湖北省" },
        { name: "广西", value: "广西壮族自治区" },
        { name: "甘肃", value: "甘肃省" },
        { name: "山西", value: "山西省" },
        { name: "内蒙古", value: "内蒙古自治区" },
        { name: "陕西", value: "陕西省" },
        { name: "吉林", value: "吉林省" },
        { name: "福建", value: "福建省" },
        { name: "新疆", value: "新疆维吾尔族自治区" },
        { name: "广东", value: "广东省" },
        { name: "青海", value: "青海省" },
        { name: "西藏", value: "西藏自治区" },
        { name: "四川", value: "四川省" },
        { name: "宁夏", value: "宁夏回族自治区" },
        { name: "海南", value: "海南省" },
        { name: "台湾", value: "台湾省" },
        { name: "香港", value: "香港特别行政区" },
        { name: "澳门", value: "澳门特别行政区" }
      ],
      currentTime:''
    };
  },
  created () {
    if (this._isMobile()) {
      // 移动
      this.width = "100%";
    } else {
      // pc
      this.width = "50%";
    }
  },
  mounted () {
    this.drawLine();
    _MEIQIA('hidePanel');
    // this.searchNameData();
    console.log(this.curentTime())
  },
  methods: {
    //获取当前日期时间
    curentTime () {      
      var now = new Date(); var year = now.getFullYear();       //年
      var month = now.getMonth() + 1;     //月
      var day = now.getDate();            //日
      var hh = now.getHours();            //时
      var mm = now.getMinutes();          //分
      var ss = now.getSeconds();          //分
      var clock = year + "年"; if (month < 10)
      clock += month + "月"; if (day < 10)
      clock += day + "日 "; if (hh < 10)
      clock += hh + ":"; 
      clock += mm ; 
      return clock;
    },
    drawLine () {
      let self = this;
      // 基于准备好的dom，初始化echarts实例
      var myChartContainer = document.getElementById("myChartChina");
      var resizeMyChartContainer = function () {
        // myChartContainer.style.width = document.body.offsetWidth / 2 + "px"; //页面一半的大小
      };
      resizeMyChartContainer();
      var myChartChina = echarts.init(myChartContainer);

      function randomData () {
        return Math.round(Math.random() * 500);
      }
      // 绘制图表
      var optionMap = {
        tooltip: {},
        legend: {
          orient: "vertical",
          left: "left",
          data: [""]
        },
        visualMap: {
          //   min: 0,
          //   max: 3000,
          //   right: "right",
          //   top: "bottom",
          //   text: ["高", "低"],
          //   calculable: true,
          color: ["#939fdd", "#95b5de", "#a5d9e9", "#a7e3ea"]
        },
        selectedMode: "single",
        series: [
          {
            name: "",
            type: "map",
            mapType: "china",
            itemStyle: {
              normal: {
                borderColor: "rgba(0, 0, 0, 0.2)"
              },
              emphasis: {
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 20,
                borderWidth: 0,
                shadowColor: "#ce2224"
              }
            },
            showLegendSymbol: false, // 点
            label: {
              normal: {
                // show: false // 显示省份名字
              },
              emphasis: {
                show: true
              }
            },
            // 动态绑定返回值
            data: self.provinceData
            // [
            //     {name:'北京',value:'123'}
            // ]
          }
        ]
      };

      myChartChina.setOption(optionMap);
      window.onresize = function () {
        resizeMyChartContainer();
        myChartChina.resize();
      };
    },
    searchNameData () {
      let local = localStorage.getItem("key");
      if (!local) {
        this.$confirm("请先登录，在进行下面的操作！", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          // 保存本地信息
          this.$router.push({
            path: "/userlogin"
          });
        });
        return;
      }
      if (this.$store.state.count == 0 && this.$store.state.show != true) {
        this.$confirm(
          "您的本月免费次数已用完，请升级会员享受无限次数查询！",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }
        ).then(() => {
          // 保存本地信息
          this.$router.push({
            path: "/vip_pay"
          });
        });
        return;
      }
      let self = this;
      let name = self.searchName;
      let province = self.province;
      let url = "/userTask/checkName?name=" + name + "&province=" + province;
      const loading = this.$loading({
        lock: true,
        text: "正在查询中，耐心等待30s-120s",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      this.$ajax.get(url).then(res => {
        this.$nextTick(() => {
          // 以服务的方式调用的 Loading 需要异步关闭
          loading.close();
        });
        if (res.data.code == 0) {
          this.currentTime = this.curentTime()
          //msg
          this.searchResult = true;
          let num = 0;
          var max;
          if (res.data.data.length) {
            this.provinceData = res.data.data;
            for (let j = 0; j < res.data.data.length - 1; j++) {
              //两两比较，如果前一个比后一个大，则交换位置。
              for (let i = 0; i < res.data.data.length - 1 - j; i++) {
                if (res.data.data[i].count < res.data.data[i + 1].count) {
                  let temp = res.data.data[i];
                  res.data.data[i] = res.data.data[i + 1];
                  res.data.data[i + 1] = temp;
                }
              }
            }
            for (let i = 0; i < res.data.data.length; i++) {
              num +=
                Number(res.data.data[i].count) == -1
                  ? 0
                  : Number(res.data.data[i].count);

              /**
               * 地图信息渲染
               * 1. 去除返回的省份和市级、特别行政区的后缀单位，因为返回的格式和echart的格式不一样
               * 2. 动态添加支持echart的name value => 接口返回的字段名不支持Echart图表渲染
               *
               *  */

              self.provinceData[i].name = String(
                res.data.data[i].cityName
              ).replace(/省|市|自治区|特别行政区|壮族|回族|维吾尔/g, "");
              self.provinceData[i].value = String(res.data.data[i].count);
              // 如果查询不过结果，显示建议的查询网址
              if (self.provinceData[i].value == -1) {
                for (let k = 0; k < this.searchAnthor.length; k++) {
                  if (this.searchAnthor[k].name == self.provinceData[i].name) {
                    self.provinceData[i].no_data_url = this.searchAnthor[
                      k
                    ].value;
                    break;
                  }
                }
              }
            }
            self.num = num;
            self.drawLine();
          } else {
            self.provinceData = [{ name: "", value: "" }];
            self.provinceData[0].name = String(res.data.data.cityName).replace(
              /省|市|自治区|特别行政区|壮族|回族|维吾尔/g,
              ""
            );
            self.provinceData[0].value = String(res.data.data.count);
            self.num = Number(res.data.data.count);
            self.drawLine();
          }
        } else {
          this.$message({
            type: "warn",
            message: res.data.msg
          });
        }
      });
    },
    _isMobile () {
      let flag = navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      );
      return flag;
    }
  }
};
</script>

<style scoped>
.height {
  height: 50px;
  line-height: 50px;
}
.margin_box {
  margin: 0 30px;
}
.ml-30 {
  margin-left: 30px;
}
.margin_top {
  margin-top: 18px;
  width: 282px !important;
}
.text_center {
  text-align: center;
}
.flex {
  display: flex;
  display: -webkit-flex;
}
.column {
  flex-direction: column;
}
.row {
  flex-direction: row;
}
.align_center {
  align-items: center;
}
.map_box {
  background: #f2f4fa;
}
.bg_value {
  background: #dbe7f7;
}
.el-input-group__prepend {
  min-width: 40px !important;
  max-width: 102px !important;
}

.search_box {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background: #ebebf6;
  padding: 18px 0;
}

.search_province,.search_name{
  display: block;
}

@media screen and (min-width: 920px) {
  .search_box{
    padding-left:180px;
  }

  .search_province,.search_name{
    display: flex;
    align-items: center;
    flex-shrink: 1;
  }

  .province_select {
    width: 300px;
  }
  
}

@media screen and (max-width: 640px) {
  .search_box{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .search_province,.search_name{
    display: flex;
    align-items: center;
    flex-shrink: 1;
  }

  .province_select {
    width: 200px;
  }
  
}



/* .search_boxs {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  font-size: 18px;
  background: #ebebf6;
  justify-content: center;
  padding: 28px 0px;
  margin-left: -5px;
} */
.serch_button {
  width: 100px;
  color: #fff;
  background: linear-gradient(to top right, #405cda, #955ef1);
  box-shadow: 1px 6px 10px #b8c0ee;
}
.name_input {
  width: 300px;
}

.width_50 {
  width: 50px;
}
/* 图表样式 */
.result {
  font-size: 18px;
  font-style: oblique;
}
.result_border {
  font-size: 16px;
  border: 1px solid #e4e4e4;
  border-radius: 20px;
  padding: 5px 10px;
  margin-left: 18px;
  font-style: oblique;
}
.result_time {
  margin-top: 15px;
  font-size: 12px;
  color: gray;
}
.font_blue {
  color: #405cda;
  border-radius: 10px;
}
.font_num {
  color: #8bacd8;
  width: 20px;
  background: #dbe7f7;
  border: 1px solid #fff;
  border-radius: 10px;
  height: 18px;
  text-align: center;
  line-height: 18px;
}
.column_box {
  display: flex;
  margin-top: 30px;
  /* height: 100%; */
  height: 80%;
  flex-wrap: wrap;
}
.column_li {
  /* width: 200px; */
  align-items: center;
  font-size: 16px;
  margin-top: 5px;
}
.column_li_name {
  width: 60px;
  padding: 2px 0;
}
.column_li_text {
  font-size: 12px;
  color: gray;
  height: 20px;
  line-height: 20px;
}
.column_padding_left {
  padding: 50px 10px;
}
.column_padding {
  padding: 50px 0 0;
}
.icon {
  width: 14px;
  height: 14px;
  margin-left: 4px;
}
.banner {
  position: relative;
  background: url(../../assets/images/rename_top.png) top no-repeat;
  height: 252px;
  font-size: 15px;
  background-size: 100% 100%;
  overflow: hidden;
}
.banner .active {
  color: #405cda;
}
.banner .step {
  position: absolute;
  top: 20px;
  left: 0px;
}
@media screen and (max-width: 450px) {
  .banner {
    height: 126px !important;
  }
}
</style>
